{% extends './base.html' %}
{% block right %}
    <h2>1. title</h2>
    <p>&lt;head&gt;</p>
    <p style="text-indent: 2em">&lt;title&gt;浏览器标题&lt;/title&gt;</p>
    <p>&lt;/head&gt;</p>
    <h2>2. 标题与段落 </h2>
    <p>&lt;body&gt;</p>
    <p style="text-indent: 2em">&lt;p&gt;p标签&lt;/p&gt;</p>
    <p style="text-indent: 2em">&lt;h1&gt;h1&lt;/h1&gt;</p>
    <p style="text-indent: 2em">&lt;h2&gt;h2&lt;/h2&gt;</p>
    <p style="text-indent: 2em">&lt;h3&gt;h3&lt;/h3&gt;</p>
    <p style="text-indent: 2em">&lt;h4&gt;h4&lt;/h4&gt;</p>
    <p style="text-indent: 2em">&lt;h5&gt;h5&lt;/h5&gt;</p>
    <p style="text-indent: 2em">&lt;h6&gt;h6&lt;/h6&gt;</p>
    <p>&lt;/body&gt;</p>
    <h2>3. 水平线与换行符</h2>
    <table border="1" width="800px">
        <tr>
            <th>标签</th>
            <th>命令</th>
        </tr>
        <tr>
            <td>水平线</td>
            <td>&lt;hr/&gt;</td>
        </tr>
        <tr>
            <td>换行线</td>
            <td>&lt;br/&gt;</td>
        </tr>
    </table>
    <h2>4. 常见的转义符</h2>
    <table border="1" width="800px">
        <tr>
            <th>字符</th>
            <th>代码</th>
        </tr>
        <tr>
            <td>空格</td>
            <td>&amp;nbsp；</td>
        </tr>
        <tr>
            <td>&gt;</td>
            <td>&amp;gt;</td>
        </tr>
        <tr>
            <td>&lt;</td>
            <td>&amp;lt;</td>
        </tr>
    </table>
    <h2>5. 链接</h2>
    <p>&lt;a href="http://www.baidu.com"&gt;本窗口打开&lt;/a&gt;</p>
    <p>&lt;a href="http://www.baidu.com" target="_blank"&gt;新窗口中打开&lt;/a&gt;</p>
    <h2>6. 图片</h2>
    <img src="../images/img_tag.png" width="400px" height="400px" alt="img标签图片" title="img标签说明"/>
    <h2>7. 表格</h2>
    <table border="2" width="600px">
        <tr>
            <th>行</th>
            <th>tr</th>
        </tr>
        <tr>
            <td>表头</td>
            <td>th</td>
        </tr>
        <tr>
            <td>普通列</td>
            <td>td</td>
        </tr>
        <tr>
            <td>边框</td>
            <td>border</td>
        </tr>
        <tr>
            <td>宽度</td>
            <td>width</td>
        </tr>
    </table>
    <h2>8. 列表</h2>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <h2>9. 常见的无意义标签</h2>
    <span>&lt;span&gt;|</span><span>&lt;span&gt;|</span><span>&lt;span&gt;不换行|</span>
    <div>&lt;div&gt;|</div><div>&lt;div&gt;|</div><div>&lt;div&gt;占用整行|</div>
    <h2>10. 表单</h2>
    <br>
        文本输入框：<input type="text">text<br>
        密码输入框：<input type="password">password<br>
        单选框：<input type="radio">radio<br>
        复选框：<input type="checkbox">checkbox<br>
        文件框：<input type="file">file<br>
        按钮：<input type="button">button<br>
        提交：<input type="submit">submit<br>
        重置：<input type="reset">reset<br>
        下拉框：<select>
                        <option>001</option>
                        <option>002</option>
                        <option>003</option>
                </select>select option<br>
        大文本：<textarea cols="80" rows="10">textarea cols-列数 rows-行数</textarea>
    </form>
{% endblock %}